<template>
  <div v-if="!isShowDetail">
    <div style="position: relative">
      <el-page-header @back="toBack"
        :content="deviceObj.name + '设备列表'">
      </el-page-header>
    </div>
    <div style="margin-top: 12px">
      <el-card shadow="never"
        class="box-card flex-sub"
        style="overflow: auto">
        <div class="div-query">
          <div class="collapse">
            <div class="collapse-header"
              @click="panelActive = !panelActive">
              <i class="collapse-header-icon"
                :class="[panelActive ? 'el-icon-caret-bottom' : 'el-icon-caret-top']" />
              {{ panelActive ? "隐藏" : "展开" }}查询条件
            </div>
            <div class="collapse-content">
              <el-collapse-transition>
                <div v-show="panelActive">
                  <el-form size="small"
                    label-position="right">
                    <el-row>
                      <el-col :span="8">
                        <el-form-item label="设备编码"
                          label-width="120px">
                          <el-input v-model="searchModel.deviceSource"
                            placeholder="设备编码"
                            clearable
                            class="filter-item search-item" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="设备名称"
                          label-width="120px">
                          <el-input v-model="searchModel.deviceName"
                            placeholder="设备名称"
                            clearable
                            class="filter-item search-item" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="设备使用情况"
                          label-width="120px">
                          <el-select v-model="searchModel.status"
                            popper-class="global-select"
                            placeholder="选择设备使用情况"
                            clearable
                            filterable>
                            <el-option v-for="item in searchArray.statusList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value" />
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8">
                        <el-form-item label="设备运行状态"
                          label-width="120px">
                          <el-select v-model="searchModel.deviceRunningState"
                            popper-class="global-select"
                            placeholder="选择设备运行状态"
                            clearable
                            filterable>
                            <el-option
                              v-for="item in searchArray.deviceRunningStateList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value" />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8"
                        style="margin-left: 10px">
                        <el-form-item>
                          <el-button type="primary"
                            icon="el-icon-search"
                            @click="toSearch"
                            style="margin-right: 10px">搜索</el-button>
                          <el-button type="info"
                            icon="el-icon-delete"
                            @click="toReset"
                            style="margin-right: 10px">重置</el-button>
                          <el-button size="small"
                            @click="getDataList">
                            <i class="el-icon-refresh"
                              style="color: #606266" />
                            <span style="color: #606266">刷新</span>
                          </el-button>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </el-collapse-transition>
            </div>
          </div>
        </div>

        <div>
          <el-table ref="elTable"
            v-loading="loading"
            border
            fit
            size="medium "
            :data="dataList"
            :row-key="(row) => row.id"
            style="width: 100%">
            <el-table-column align="center"
              type="index"
              width="50"
              fixed
              label="#"
              :index="indexMethod" />

            <af-table-column align="center"
              label="设备编码"
              prop="deviceSource"
              width="220" />
            <af-table-column align="center"
              label="设备名称"
              prop="deviceName" />
            <af-table-column align="center"
              label="设备类型"
              prop="deviceTypeStr" />
            <af-table-column align="center"
              label="设备使用情况"
              prop="status"
              width="110">
              <template slot-scope="{ row }">
                <el-tag size="medium"
                  :style="row.status | constantKeyTagStyleObj('DEVICE_STATUS')">
                  {{ row.status | constantKeyValue("DEVICE_STATUS") }}
                </el-tag>
              </template>
            </af-table-column>
            <af-table-column align="center"
              label="设备运行状态"
              prop="deviceRunningState"
              width="110">
              <template slot-scope="{ row }">
                <el-tag size="medium"
                  :style="
                    row.deviceRunningState
                    | constantKeyTagStyleObj('DEVICE_RUNNING_STATE')
                  ">
                  {{ row.deviceRunningState | constantKeyValue("DEVICE_RUNNING_STATE") }}
                </el-tag>
              </template>
            </af-table-column>
            <af-table-column align="center"
              label="设备型号"
              prop="deviceModel" />

            <af-table-column align="center"
              label="设备所在位置"
              prop="deviceLocation">
              <template slot-scope="{ row }">
                <a class="a-text"
                  @click="toLookLocation(row)">
                  {{
                    row.gridMountFullPathText == null || row.gridMountFullPathText == ""
                    ? ""
                    : row.gridMountFullPathText + ">>"
                  }}{{ row.deviceLocation }}
                </a>
              </template>
            </af-table-column>
            <af-table-column align="center"
              label="是否激活"
              prop="isActive"
              width="80">
              <template slot-scope="{ row }">
                <span v-if="row.isActive == 1">已激活</span>
                <span v-if="row.isActive == 0">未激活</span>
              </template>
            </af-table-column>
            <af-table-column align="center"
              label="创建时间"
              prop="createdTime"
              sortable
              width="150" />
            <el-table-column align="center"
              label="操作"
              fixed="right"
              width="80">
              <template slot-scope="{ row }">
                <el-tooltip effect="dark"
                  content="详情"
                  placement="top-start">
                  <i class="iconfont icon-chakanxiangqing2 i-detail"
                    @click="toDetail(row)" />
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total > 0"
            :total="total"
            :page.sync="pagination.pageNum"
            :limit.sync="pagination.pageSize"
            :page-sizes="pageSizeOptions"
            @pagination="getDataList" />
        </div>
      </el-card>
    </div>
  </div>
  <div v-else>
    <detail :detailObj="detailObj"
      @back="goBack"
      v-if="isShowDetail"></detail>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import dataTableMixins from "@/mixins/data-table-mixins";
import recDataDeviceList from "../../../device-manage/device-list/device-list.js";
import deviceManageApi from "@/api/device-manage";
import Detail from "./Detail";
export default {
  name: "List",
  components: {
    Pagination,
    Detail,
  },
  mixins: [dataTableMixins],
  props: {
    deviceObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data () {
    return {
      searchArray: recDataDeviceList.RecDataSearchArray,
      isShowDetail: false,
      detailObj: {},
    };
  },
  mounted () {
    this.getDataList();
  },
  methods: {
    toBack () {
      this.$emit("back");
    },
    getDataList () {
      const searchModel = this.formatSearchData(this.searchModel);
      searchModel.deviceIsLine = 1;
      searchModel.deviceType = this.deviceObj.deviceType;
      deviceManageApi
        .getSurveySmokeList({
          ...this.pagination,
          ...searchModel,
          ...this.sort,
        })
        .then((ret) => {
          this.dataList = ret.data.data.rows;
          this.dataList.forEach((ele, i) => {
            ele.deviceTypeStr = this.deviceObj.name;
          });
          this.total = ret.data.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.dataList = [];
          this.total = 0;
        });
    },

    toSearch () {
      this.pagination.pageNum = 1;
      this.getDataList();
    },
    toReset () {
      this.searchModel = {};
      this.sort = {};
      this.$refs.elTable.clearSort();
      this.$refs.elTable.clearFilter();
      this.toSearch();
    },

    indexMethod (index) {
      return this.formatIndex(index, this.pagination);
    },

    toDetail (data) {
      this.detailObj = data;
      this.isShowDetail = true;
    },
    goBack () {
      this.isShowDetail = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../../../styles/part-custom";
</style>
